<template>
  <div class='cheatInstall'>
    <!-- this is  {{ name }} -->
     <div v-if="data" class="install" v-for="game in sortGameList(data.gameList)">
      <div class="cover">
        <div class="manual_installation" @click="openUrl(game)">
          <img src="@renderer/assets/手动安装.svg" alt="">
          <p>手动安装</p>
        </div>
        <img :src="gameCover(game)" alt=""></img>
        <div class="automatic_installation" @click="install(game)">
          <img src="@renderer/assets/一键安装.svg" alt="">
          <p>一键安装</p>
        </div>
      </div>
      <div class="info" :class="{installed: game.install}">
        <span class="gameName">{{ game.gameName }}</span>
        <span class="version">版本: {{ game.version }}</span>
        <span class="time">最后更新时间：{{ game.time }}</span>
      </div>
     </div>
    <div v-else class="loading">
      Loading...
    </div>
    <div v-show="isInstalling" class="installing">
      <h1>{{ msg }}</h1>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

  const router = useRouter();

  function openUrl(game: any){
    window.open(game.url)
  }

  const isInstalling = ref(false);
  const msg = ref('')

  async function install(game: any){
    // 拿steam路径
    const steamPath = localStorage.getItem('steamPath') || ''
    // 如果steam路径等于空
    if(steamPath==''){
      router.push({
        name: 'settings',
        query: {
          msg: 'steam库路径为空，请先设置路径'
        }
      })
      return null
    }
    isInstalling.value = true
    // console.log(isInstalling);
    msg.value = '正在安装'+game.gameName+'...'

    const installPath = steamPath+'/'+game.pathName
    console.log("安装路径"+installPath);
    
    const result = await window.electron.ipcRenderer.invoke('install',game.url,installPath)
    console.log(result);

    // 从 localStorage 读取数据（需要 JSON.parse）
    const storedData = localStorage.getItem('cacheData');

    // 初始化为 Map（键为 game.gameName，值为数据对象）
    let cacheMap;
    if (storedData) {
      const parsedData = JSON.parse(storedData);
      cacheMap = new Map(parsedData.map(item => [item.game, item]));
    } else {
      cacheMap = new Map();
    }

    const thisData = {
      game: game.gameName,
      version: game.version,
      modPath: result
    };

    // 直接设置或更新数据（Map 会自动覆盖相同键的值）
    cacheMap.set(game.gameName, thisData);

    // 转换回数组并存储
    localStorage.setItem(
      'cacheData',
      JSON.stringify(Array.from(cacheMap.values()))
    );

    isInstalling.value = false

    router.go(0)

    return result
  }

  defineProps<{
    data: any
  }>()

  const gameCover = (game: any)=>{
    if(game.appid == 3527290)
      return 'https://cdn.akamai.steamstatic.com/steam/apps/3527290/library_hero.jpg'
    return `https://cdn.akamai.steamstatic.com/steam/apps/${game.appid}/header.jpg`
  }

  const sortGameList = (gameList) => {
  return gameList.sort((a, b) => {
    return new Date(b.time).getTime() - new Date(a.time).getTime()
  })
}

</script>
<style scoped lang='scss'>
  .cheatInstall {
    width: calc(100% - 80px);
    height: 100vh;
    float: right;
    position: relative;
    background-color: rgba($color: white, $alpha: 0.8);
    overflow-y: auto;
    overflow-x: hidden;
    .install{
      position: relative;
      width: 450px;
      height: 250px;
      // background-color: yellow;
      margin: 10px auto;
      transition: all 0.2s;

      &:hover{
        width: 800px;
      }

      
      text-align: center;

      .cover{
        position: relative;
        img{
          width: 450px;
          height: 200px;
          border-radius: 20px;
          z-index: 6;
          position: relative;
        }
        .manual_installation{
          background-color: rgb(159, 159, 159);
          left: 0px;
        }
        .automatic_installation{
          right: 0px;
          background-color: rgb(244, 182, 255);
        }
        .manual_installation,.automatic_installation{
          width: 200px;
          height: 200px;
          position: absolute;
          border-radius: 20px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          
          z-index: 2;
          top: 0;
          img{
            width: 50px;
            height: 50px;
          }
        }
      }

      .info{

        display: block;

        .gameName{
          font-size: larger;
          font-weight: 900;
          display: inline-block;
          margin: 0 10px;
        }
        .version{
          color: blueviolet;
          display: inline-block;
          margin: 0 10px;
        }
        .time{
          display: inline-block;
          color: rgb(97, 97, 97);
        }
      }

      .installed{
        background: rgb(245,255,112);
        background: linear-gradient(120deg, rgba(245,255,112,1) 0%, rgba(143,226,100,1) 100%);
      }

    }

    .installing{
      width: 100vw;
      height: 100vh;
      background-color: rgb(251, 203, 255);
      position:fixed;
      top: 0;
      left: 0;
      z-index: 10;
      text-align: center;
    }
  }
</style>
